<!Doctype html>
<html>

<head>
    <title>oixan的博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/blog.css">
</head>

<body>
    <div class="head">
        <div class="headnav">
            <div class="naveframe">
                <ul class="navlist">
                    <li>
                        <a href="../index.html">
                            主页
                        </a>
                    </li>
                    <li>
                        <a href="../bloglist.html">
                            博客
                        </a>
                    </li>
                    <li>
                        <a href="../about.html">
                            关于
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="headtext">
            <div class="headtext1">世界很简单，人类很复杂。</div>
            <div class="headtext2">浮生若梦，寻寻觅觅。</div>
        </div>
    </div>

    <div class="contents-all">
        <div class="contents">

            <div class="frame">
                <div class="title">
                    <h3>canvas发光粒子</h3>
                </div>
                <div class="dtime">时间：2021-04-13</div>
                <div class="detail">

                    <style>
                        canvas {
                            width: 100%;
                        }
                        #can{
                            width:90%;
                        }
                    </style>

                    <div id="can"></div>

                    <script>
                        /*jshint esversion:6*/
                        let can = document.createElement("canvas");
                        let div=document.getElementById("can");
                        div.appendChild(can);
                        let ctx = can.getContext('2d');
                        function resize() {
                            can.width = window.innerWidth;
                            can.height = window.innerHeight;
                        }
                        const max_radius = 3;
                        const min_radius = 1;
                        const drag = 50;
                        window.onresize = function () {
                            resize();
                        };
                        function cfill() {
                            ctx.fillStyle = "#000";
                            ctx.fillRect(0, 0, can.width, can.height);
                            ctx.fill();
                        }
                        let mouse = {
                            x: -1000,
                            y: -1000
                        };
                        can.onmousemove = function (e) {
                            mouse.x = e.clientX;
                            mouse.y = e.clientY;
                        };
                        can.ontouchmove = function (e) {
                            mouse.x = e.touches[0].clientX;
                            mouse.y = e.touches[0].clientY;
                        };
                        resize();
                        cfill();

                        function distance(x, y, x1, y1) {
                            return Math.sqrt((x1 - x) * (x1 - x) + (y1 - y) * (y1 - y));
                        }

                        class Particle {
                            constructor(pos, target, vel, color, radius) {
                                this.pos = pos;
                                this.target = target;
                                this.vel = vel;
                                this.color = color;
                                this.radius = radius;
                                let arr = [-1, 1];
                                this.direction = arr[~~(Math.random() * 2)] * Math.random() / 10;
                            }
                            set(type, value) {
                                this[type] = value;
                            }
                            update() {
                                this.radius += this.direction;
                                this.vel.x = (this.pos.x - this.target.x) / drag;
                                this.vel.y = (this.pos.y - this.target.y) / drag;
                                if (distance(this.pos.x, this.pos.y, mouse.x, mouse.y) < 50) {
                                    this.vel.x += this.vel.x - (this.pos.x - mouse.x) / 15;
                                    this.vel.y += this.vel.y - (this.pos.y - mouse.y) / 15;
                                }
                                if (this.radius >= max_radius) {
                                    this.direction *= -1;
                                }
                                if (this.radius <= 1) {
                                    this.direction *= -1;
                                }
                                this.pos.x -= this.vel.x;
                                this.pos.y -= this.vel.y;
                            }
                            draw() {
                                ctx.beginPath();
                                ctx.fillStyle = this.color;
                                ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2);
                                ctx.fill();
                            }
                        }
                        let particles = [];
                        let colors = ["#bf1337", "#f3f1f3", "#084c8d", "#f2d108", "#efd282"];
                        let bool = true;
                        let current = 0, i;
                        function changeText(text) {
                            let current = 0, temp, radius, color;
                            cfill();
                            ctx.fillStyle = "#fff";
                            ctx.font = "15vw Times";
                            ctx.fillText(text, can.width * 0.32 - ctx.measureText(text).width * 0.5, can.height * 0.5 + 60);
                            let data = ctx.getImageData(0, 0, can.width, can.height).data;
                            cfill();
                            for (i = 0; i < data.length; i += 8) {
                                temp = { x: (i / 4) % can.width, y: ~~((i / 4) / can.width) };
                                if (data[i] !== 0 && ~~(Math.random() * 5) == 1/*(temp.x % (max_radius+1) === 0 && temp.y % (max_radius+1) === 0)*/) {
                                    if (data[i + 4] !== 255 || data[i - 4] !== 255 || data[i + can.width * 4] !== 255 || data[i - can.width * 4] !== 255) {
                                        if (current < particles.length) {
                                            particles[current].set("target", temp);
                                        } else {
                                            radius = max_radius - Math.random() * min_radius;
                                            temp = { x: Math.random() * can.width, y: Math.random() * can.height };
                                            if (bool) {
                                                temp = { x: (i / 4) % can.width, y: ~~((i / 4) / can.width) };
                                            }
                                            color = colors[~~(Math.random() * colors.length)];
                                            let p = new Particle(
                                                temp,
                                                { x: (i / 4) % can.width, y: ~~((i / 4) / can.width) }, { x: 0, y: 0 },
                                                color,
                                                radius);
                                            particles.push(p);
                                        }
                                        ++current;
                                    }
                                }
                            }
                            bool = false;
                            particles.splice(current, particles.length - current);
                        }
                        function draw() {
                            cfill();
                            for (i = 0; i < particles.length; ++i) {
                                particles[i].update();
                                particles[i].draw();
                            }
                        }
                        changeText("oixan博客");
                        setInterval(draw, 1);

                    </script>





                </div>
                <a href="javascript:void(0)" onclick="showPg()">返回</a>
            </div>


        </div>
    </div>
    <div class="footer">
        <div class="footertext">©2018,oixan博客</div>
    </div>
    <span id="backtop" onclick="topFunction()">返回顶部</span>
</body>
<script src="../js/fanhuiye.js"></script>

</html>